<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:background-color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据预览</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}"/>
</head>

<!--<style>-->
<!--label {-->
<!--height: 40px;-->
<!--}-->
<!--</style>-->
<body>

    <div style="width:800px;height:100%;margin-left:270px;">
        <div style="height: 50px;font-size: 30px;text-align: center;font-weight: 600">
            数据集预览
        </div>
        <form action="/algo/kmeans/add" method="post">
            数据摘要概要：
            <textarea name="info" type="text"  style="width: 100%;resize: none;" rows="10" class="form-control" th:text="${previewDataResult.info}"></textarea><br>

            <!--数据统计学描述：<input class="form-control" type="text" th:value="${algoResult.describ}" name="appName"></span><br>-->
            数据统计学描述：
            <textarea name="describ" type="text"  style="width: 100%;resize: none;" rows="10" class="form-control" th:text="${previewDataResult.describ}"></textarea><br>
        </form>
        数据预览：
        <table class="table table-striped table-bordered table-hover text-center">
            <thead id="data_cols">
            <!--<tr style="text-align:center" th:each="trainCol:${previewDataResult.trainCols}">-->
            <!--<th th:text="${trainCol}"></th>-->
            <!--</tr>-->
            </thead>
            <tbody id="data_rows">
            </tbody>
        </table>
    </div>


</body>
<script th:inline="javascript">
    function crtate_table() {
        //1.创建表头
        var data_cols = document.getElementById("data_cols")
        var col_innerHtml = ''
        var train_cols = [[${colList}]]
        for (var i = 0; i < train_cols.length; i++) {
            var train_col = train_cols[i]
            col_innerHtml += '<th class="text-center">'+train_col+'</th>'
        }
        var tr = document.createElement('tr');
        tr.innerHTML = col_innerHtml;
        data_cols.appendChild(tr)

        //2.创建表格内容
        var data_rows = document.getElementById("data_rows")
        var model_datas = [[${previewDataResult.modelData}]]
        for (var i = 0; i < model_datas.length; i++) {
            var model_data = model_datas[i]
            var row_innerHtml = ''

            for (var j = 0; j < train_cols.length; j++) {
                var train_col = train_cols[j]
                var col_value = model_data[train_col]
                row_innerHtml += '<td>'+col_value+'</td>'
            }
            var tr = document.createElement('tr');
            tr.innerHTML = row_innerHtml
            data_rows.appendChild(tr)
        }
    }
    crtate_table()
</script>
</html>
